<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>图书管理系统 - 管理员注册</title>
	<!-- 引入指定字体 -->
	<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
	<!-- 引入Font Awesome图标 -->
	<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

	<style type="text/css">
		/* 全局样式 */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Pacifico', cursive;
			background-color: #f9f4fc;
			background-image:
					radial-gradient(#d8bfd8 0.5px, transparent 0.5px),
					radial-gradient(#d8bfd8 0.5px, #f9f4fc 0.5px);
			background-size: 20px 20px;
			background-position: 0 0, 10px 10px;
			min-height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px;
		}

		/* 主容器 */
		.register-container {
			width: 100%;
			max-width: 500px;
			background: white;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(123, 31, 162, 0.1);
			padding: 35px;
			animation: fadeIn 0.6s ease-out;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: translateY(20px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* 标题样式 */
		.register-container h3 {
			color: #7b1fa2;
			text-align: center;
			font-size: 2rem;
			margin-bottom: 30px;
			text-shadow: 1px 1px 3px rgba(0,0,0,0.05);
			position: relative;
		}

		.register-container h3:after {
			content: '';
			position: absolute;
			bottom: -10px;
			left: 50%;
			transform: translateX(-50%);
			width: 60px;
			height: 3px;
			background: #ba68c8;
			border-radius: 3px;
		}

		/* 表单样式 */
		form {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}

		/* 输入组样式 */
		.input-group {
			position: relative;
		}

		.input-group input {
			width: 100%;
			padding: 12px 15px 12px 45px;
			border: 2px solid #e1bee7;
			border-radius: 8px;
			font-family: 'Pacifico', cursive;
			font-size: 1rem;
			color: #4a148c;
			transition: all 0.3s ease;
		}

		/* 日期输入框特殊处理（适配浏览器默认样式） */
		.input-group input[type="date"] {
			/* 清除部分浏览器默认内边距，保持与其他输入框对齐 */
			padding-right: 20px;
			/* 自定义日期选择器图标颜色（部分浏览器支持） */
			accent-color: #9c27b0;
		}

		.input-group input:focus {
			outline: none;
			border-color: #9c27b0;
			box-shadow: 0 0 0 4px rgba(156, 39, 176, 0.1);
		}

		/* 输入框图标 */
		.input-group i {
			position: absolute;
			left: 15px;
			top: 50%;
			transform: translateY(-50%);
			color: #9c27b0;
		}

		/* 错误信息样式 */
		.error-messages {
			margin-top: 5px;
			padding-left: 45px;
			display: flex;
			flex-direction: column;
			gap: 2px;
		}

		.error-message {
			color: #e53935;
			font-size: 0.85rem;
			display: none; /* 默认隐藏 */
			align-items: center;
		}

		.error-message i {
			margin-right: 5px;
			font-size: 0.9rem;
			position: static;
			transform: none;
		}

		/* 性别选择 */
		.gender-group {
			margin: 10px 0;
			padding-left: 45px;
			display: flex;
			gap: 20px;
			align-items: center;
		}

		.gender-group input[type="radio"] {
			display: none;
		}

		.gender-group input[type="radio"] + label {
			position: relative;
			padding-left: 25px;
			cursor: pointer;
			color: #4a148c;
			transition: color 0.3s ease;
		}

		.gender-group input[type="radio"] + label:before {
			content: '';
			position: absolute;
			left: 0;
			top: 2px;
			width: 18px;
			height: 18px;
			border: 2px solid #9c27b0;
			border-radius: 50%;
			transition: all 0.3s ease;
		}

		.gender-group input[type="radio"]:checked + label:before {
			background-color: #9c27b0;
			box-shadow: inset 0 0 0 3px white;
		}

		.gender-group input[type="radio"]:checked + label {
			color: #9c27b0;
			font-weight: bold;
		}

		/* 提交按钮 */
		.submit-btn {
			width: 100%;
			padding: 12px;
			background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
			color: white;
			border: none;
			border-radius: 8px;
			font-family: 'Pacifico', cursive;
			font-size: 1.1rem;
			cursor: pointer;
			transition: all 0.3s ease;
			margin-top: 10px;
		}

		.submit-btn:hover {
			background: linear-gradient(135deg, #8e24aa 0%, #6a1b9a 100%);
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(123, 31, 162, 0.2);
		}

		/* 登录链接 */
		.login-link {
			display: block;
			text-align: center;
			margin-top: 20px;
			color: #9c27b0;
			text-decoration: none;
			transition: all 0.3s ease;
			font-size: 1.05rem;
		}

		.login-link:hover {
			color: #7b1fa2;
			text-decoration: underline;
		}

		/* 响应式调整 */
		@media (max-width: 576px) {
			.register-container {
				padding: 25px 20px;
			}

			.register-container h3 {
				font-size: 1.7rem;
			}

			.error-messages {
				padding-left: 35px;
			}

			.gender-group {
				padding-left: 35px;
			}
		}
	</style>
</head>
<body>
<div class="register-container">
	<h3>图书管理系统管理员注册</h3>
	<form action="/admin/execu_register" method="post">
		<!-- 邮箱输入 -->
		<div class="input-group">
			<i class="fa fa-envelope"></i>
			<input type="text" placeholder="请输入邮箱账号" name="adminEmail" />
			<div class="error-messages">
                    <span class="error-message" style="display: #(emailError ? 'flex':'none')">
                        <i class="fa fa-exclamation-circle"></i>该邮箱已被注册
                    </span>
				<span class="error-message email-empty">
                        <i class="fa fa-exclamation-circle"></i>邮箱不能为空
                    </span>
			</div>
		</div>

		<!-- 用户名输入 -->
		<div class="input-group">
			<i class="fa fa-user"></i>
			<input type="text" placeholder="请输入用户名" name="adminName"/>
			<div class="error-messages">
                    <span class="error-message" style="display: #(userError ? 'flex':'none')">
                        <i class="fa fa-exclamation-circle"></i>用户名已存在
                    </span>
				<span class="error-message name-empty">
                        <i class="fa fa-exclamation-circle"></i>用户名不能为空
                    </span>
			</div>
		</div>

		<!-- 密码输入 -->
		<div class="input-group">
			<i class="fa fa-lock"></i>
			<input type="password" placeholder="请输入密码" name="adminPwd"/>
			<div class="error-messages">
                    <span class="error-message pwd-length">
                        <i class="fa fa-exclamation-circle"></i>密码长度不能少于6位
                    </span>
			</div>
		</div>

		<!-- 确认密码输入 -->
		<div class="input-group">
			<i class="fa fa-lock"></i>
			<input type="password" placeholder="请再次输入密码" name="adminPwd2"/>
			<div class="error-messages">
                    <span class="error-message pwd-match">
                        <i class="fa fa-exclamation-circle"></i>两次密码不一致
                    </span>
			</div>
		</div>

		<!-- 新增：出生日期输入（日期类型） -->
		<div class="input-group">
			<i class="fa fa-calendar"></i>
			<input type="date" name="adminBir" />
			<div class="error-messages">
                    <span class="error-message bir-empty">
                        <i class="fa fa-exclamation-circle"></i>出生日期不能为空
                    </span>
			</div>
		</div>

		<!-- 家庭地址输入 -->
		<div class="input-group">
			<i class="fa fa-map-marker"></i>
			<input type="text" placeholder="请输入家庭地址" name="adminAddr"/>
			<div class="error-messages">
                    <span class="error-message addr-empty">
                        <i class="fa fa-exclamation-circle"></i>家庭地址不能为空
                    </span>
			</div>
		</div>

		<!-- 性别选择 -->
		<div class="input-group">
			<i class="fa fa-venus-mars"></i>
			<div class="gender-group">
				<input type="radio" value="1" name="adminSex" id="male" checked/>
				<label for="male">男</label>
				<input type="radio" value="0" name="adminSex" id="female"/>
				<label for="female">女</label>
			</div>
		</div>

		<!-- 提交按钮 -->
		<input type="submit" class="submit-btn" value="注册"/>

		<!-- 登录链接 -->
		<a href="/admin/login" class="login-link">
			<i class="fa fa-sign-in"></i> 已经有账号？去登录
		</a>
	</form>
</div>

<script type="text/javascript">
	// 前端基础验证
	const form = document.querySelector('form');
	const adminEmail = document.querySelector('input[name="adminEmail"]');
	const adminName = document.querySelector('input[name="adminName"]');
	const adminPwd = document.querySelector('input[name="adminPwd"]');
	const adminPwd2 = document.querySelector('input[name="adminPwd2"]');
	const adminAddr = document.querySelector('input[name="adminAddr"]');
	// 新增：出生日期元素
	const adminBir = document.querySelector('input[name="adminBir"]');

	// 错误提示元素
	const emailEmpty = document.querySelector('.email-empty');
	const nameEmpty = document.querySelector('.name-empty');
	const pwdLength = document.querySelector('.pwd-length');
	const pwdMatch = document.querySelector('.pwd-match');
	const addrEmpty = document.querySelector('.addr-empty');
	// 新增：出生日期非空错误提示
	const birEmpty = document.querySelector('.bir-empty');

	// 隐藏所有前端错误提示
	function hideFrontendErrors() {
		emailEmpty.style.display = 'none';
		nameEmpty.style.display = 'none';
		pwdLength.style.display = 'none';
		pwdMatch.style.display = 'none';
		addrEmpty.style.display = 'none';
		birEmpty.style.display = 'none'; // 新增：隐藏出生日期错误提示
	}

	// 显示错误提示并添加抖动动画
	function showError(element) {
		element.style.display = 'flex';
		element.style.animation = 'none';
		element.offsetHeight; // 触发重绘
		element.style.animation = 'shake 0.5s ease';
	}

	// 抖动动画
	const style = document.createElement('style');
	style.textContent = `
            @keyframes shake {
                0%, 100% { transform: translateX(0); }
                20%, 60% { transform: translateX(-3px); }
                40%, 80% { transform: translateX(3px); }
            }
        `;
	document.head.appendChild(style);

	// 表单提交验证
	form.addEventListener('submit', function(e) {
		hideFrontendErrors();
		let isValid = true;

		// 邮箱非空验证
		if (!adminEmail.value.trim()) {
			showError(emailEmpty);
			isValid = false;
		}

		// 用户名非空验证
		if (!adminName.value.trim()) {
			showError(nameEmpty);
			isValid = false;
		}

		// 密码长度验证
		if (adminPwd.value.trim() && adminPwd.value.length < 6) {
			showError(pwdLength);
			isValid = false;
		}

		// 密码非空验证
		if (!adminPwd.value.trim()) {
			showError(pwdLength);
			pwdLength.innerHTML = '<i class="fa fa-exclamation-circle"></i>密码不能为空';
			isValid = false;
		} else {
			pwdLength.innerHTML = '<i class="fa fa-exclamation-circle"></i>密码长度不能少于6位';
		}

		// 两次密码一致性验证
		if (adminPwd.value.trim() && adminPwd2.value.trim() && adminPwd.value !== adminPwd2.value) {
			showError(pwdMatch);
			isValid = false;
		}

		// 新增：出生日期非空验证（日期类型值为空时是''）
		if (!adminBir.value) {
			showError(birEmpty);
			isValid = false;
		}

		// 家庭地址非空验证
		if (!adminAddr.value.trim()) {
			showError(addrEmpty);
			isValid = false;
		}

		// 如果验证不通过，阻止表单提交
		if (!isValid) {
			e.preventDefault();
		}
	});
</script>
</body>
</html>